<template>
    <div id="tmpl">
        <!--购物车列表-->
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch v-model="value[index]" class="switch"></mt-switch>
            <img class="img" hight="75 "width="75" alt="商品图片" :src="item.thum_path"/>
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>
                            ￥{{item.sell_price}}
                        </li>
                        <li>
                            <!--count:加载按钮组件的时候，初始化cou,用户显示-->
                            <!--goodsid 传递当前商品的id, -->
                            <car-input-number
                                    :initCount="item.cou"
                                    :goodsid="item.id"
                                    v-on:carobj="getinputnumber"
                            ></car-input-number>
                        </li>
                        <li>
                            <a @click="delrow(item.id, index)" href="javascript:void(0);">删除</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计（不含运费）</li>
                    <li>已勾选商品{{totalcount}}件, 总价￥{{totalAmount}}元</li>
                </ul>
            </div>
            <div id="button">
                 <mt-button type="danger" size="small">去结算</mt-button>
            </div>
        </div>

        {{value}}
    </div>
</template>
<script>
    import { Switch } from 'mint-ui';
    import {getgoodsObject, updateData, removeItem} from "../../kits/myLocalStorage.js";
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';
    import carInputNumber from '../subcom/carInputNum.vue';
    //导入操作小球数量的js，在此处导入是为了使vm发出数量的增加和减少事件, 让App.vue监听
    import {vm, COUNT_EVENT, TOTAL_COUNT_EVENT} from "../../kits/vm.js";


    export default {
        components: {
            'car-input-number' :carInputNumber
        },
        computed: {
            totalcount() {
                //计算逻辑：只需要计算this.value中true的个数
                var truArr = this.value.filter(function (item) {
                    return item
                });
                var amount = 0;

                //计算出当前选中商品的总价格
                //计算方式，当前购买数量*商品的单价，（其中这两个值均从this.datalist中来）
                this.value.forEach((item,index)=> {
                    //判断如果item为true，则这个商品是要计算的
                    if(item) {
                        var count = this.datalist[index].cou;
                        var price = this.datalist[index].sell_price;
                        var itemamount = count * price;
                        amount += itemamount;
                    }


                })
                this.totalAmount = amount;
                return truArr.length;
            }
        },
    data() {
        return{
            value: [], //按钮是否被选中
            datalist:[], //购物车商品数据列表
            totalAmount:0 //总价格
        }
    },
    created() {
        this.getdatalist();


    },
    methods: {
            /**
             * 更新底部的数量
             */
            updatebuttomcount() {
                var count = 0;
                this.datalist.forEach((item)=>{
                    count += item.cou;
                });
                vm.$emit(TOTAL_COUNT_EVENT, count);
            },
        /**
         * 删除一行数据
         * @param goodsid
         * @param index
         */
            delrow(goodsid, index) {
            //1.0 将this.value数组中的index 这个位置的值移除(当移除这个值的时候就会自动触发计算属性totalcount的执行）
            this.value.splice(index, 1);

            //2.0 将this.datalist中的index 的之歌位置的值移除
            var count = this.datalist[index].cou;
            this.datalist.splice(index, 1);


            //3. 0浙江localStorage的goodsid对应的所有值移除
            removeItem(goodsid);

            //4.0 使底部徽章数量减少
            vm.$emit(COUNT_EVENT, -count);
            },
            getinputnumber(resObj) {
                //1.0 更新LocalStorage
                updateData(resObj);

                //2.0 更新 this.datalist中的当前数量
                for(var i = 0 ; i < this.datalist.length; i++) {
                    var item = this.datalist[i];
                    if(item.id == resObj.goodsid) {
                        if (resObj.type == "add") {
                            //更新当前输入选择框显示的数量
                            item.cou++;
                            //更新徽章数量
                            // vm.$emit(COUNT_EVENT, 1)
                        } else {
                            //更新当前输入选择框显示的数量
                            item.cou--;
                            //更新徽章数量
                            // vm.$emit(COUNT_EVENT, -1)
                        }
                        break;
                    }
                }
                this.updatebuttomcount();
            },
        getdatalist() {
            //1.0 从localstorage中获取到所有的商品id值
            /**
             * obj的格式{
             *     87:4,
             *     88:9
             * }
             * @type {{}}
             */
            var obj = getgoodsObject();

            //2.0 将id值按照api的参数格式提交给api
            var idstring = '?';
            for(var key in obj) {
                idstring +=  key + "=" + obj[key] + "&";
            }
            idstring = idstring.substr(0, idstring.length - 1);
            //3.0 ajax请求这个api得到完整的商品数据信息,赋值给datalist
            var url = common.apidomain + "/CarList" + idstring;
            this.$http.get(url).then((resp)=> {
                if (resp.body.status != 0) {
                    Toast(resp.body.message);
                    return;
                }
                //将localStorage中的所有商品对应的count值赋值给message中的cou
                resp.body.message.forEach((item)=> {
                    item.cou = obj[item.id];

                    //初始化所有的“选中button”
                    //注意！！es6语法中的箭头函数方法体里面是没有this的，它会一直往外找，这里是找到了vm
                    //而function的写法中的this指向function本身，function里面没有value，所以就undefined
                    this.value.push(false);
                });
                this.datalist = resp.body.message;

                this.updatebuttomcount();
            });

        }


    }
}
</script>

<style scoped>
    .row {
        border-bottom: 1px solid rgba(0,0,0,0.3);
        height: 102px;
        display: flex;
    }

    .switch{
        /*flex:0 0 52px;*/
    }

    .img {
        margin-left: 5px;
        height: 75px;
        width: 75px;
        flex: 0 0 85px;
    }
    .inforight {
        margin-left: 5px;
        flex: 1;
    }

    .inforight ul {
        padding-left: 0px;
    }
    .inforight li{
        list-style: none;
        flex:1;
        display: inline-block;
    }
    
    .inforight h4{
        color: #0094ff;
        font-size: 14px;
    }

    .bottom li:first-child {
        color: red;
        margin-right: 10px;
    }
    .bottom li:last-child {
        margin-left: 10px;
    }


    /*统计和结算*/
    #total{
        height: 100px;
        background-color: rgba(0,0,0,0.1);
        display: flex;
        padding: 5px;
    }

    #total ul {
        padding-left: 0;
    }

    #total li {
        list-style: none;
        font-size:15px;
    }
    #button {
        flex:0 0 60px;
        margin: 30px 0 0 0;
    }
    .desc {
        flex:1;
        margin-left: 10px;
        margin-top: 10px;
    }
</style>
